<template>
  <el-card class="person">
    <el-form :model="form" label-width="60px">
      <el-upload
          class="avatar-uploader"
          action="http://localhost:9090/file/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
        <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-form-item label="用户名">
        <el-input v-model="form.username" disabled autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
          <el-radio label="外星人"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button type="warning" @click="changePassword" style="margin-right: 60px; float: right" >修改密码</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="密码修改" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="passwordForm" label-width="60px" :rules="rules" ref="passwordForm">
        <el-form-item prop="originPassword">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user"
                    v-model="passwordForm.originPassword" placeholder="请输入原始密码"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 5px 0"
                    prefix-icon="el-icon-lock" show-password v-model="passwordForm.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="checkPassword">
          <el-input size="medium" style="margin: 5px 0"
                    prefix-icon="el-icon-lock" show-password v-model="passwordForm.checkPassword"
                    placeholder="请确认密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; passwordForm = []">取 消</el-button>
        <el-button type="primary" @click="savePassword">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "FrontPerson",
  data() {
    return {
      form: {},
      passwordForm: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
      rules: {
        originPassword: [
          { required: true, message: '请输入原始密码', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      let res = await this.request.get("/user/username/" + this.user.username)
      if (res.code === '200') {
        this.form = res.data;
        // console.log(res)
      }
    },
    // 保存
    save() {
      this.request.post("/user", this.form).then(res =>{
        if(res.code === '200') {
          this.$message.success("保存成功")
          // 触发父级更新User的方法
          this.$emit("refreshUser");
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    handleAvatarSuccess (res) {
      this.form.avatarUrl = res
    },
    changePassword () {
      this.dialogFormVisible = true;
    },
    savePassword () {
      this.passwordForm.username = this.user.username
      this.$refs['passwordForm'].validate((valid) => {
        // 当验证生效时向后端请求
        if (valid) {
          if(this.passwordForm.checkPassword != this.passwordForm.password) {
            this.$message.error("两次输入密码不一致")
            return false
          }
          this.request.post("/user/updatePassword",  this.passwordForm).then(res => {
            if(res.code === "401"){
              this.$message.error(res.msg)
            }
            if(res.code === "200" ){
              this.$message.success("密码修改成功请从新登录")
              this.$router.push("/login")
            }
          })
        } else {
          this.$message.error("请正确输入")
          return false
        }
      })
    }

  }
}
</script>

<style scoped>
.person{
  width: 500px;
  margin: 20px auto;
}
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  border-radius: 10px;
  width: 128px;
  height: 128px;
  display: block;
}

</style>